<template>
  <div class="pd-le-ri">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <el-icon :size="11">
            <user-filled />
          </el-icon> 题目管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div style="min-width: 800px; display: flex">
        <!-- <el-select v-model="regionId" class="m-2" placeholder="选择区域">
          <el-option v-for="item in typeList" :key="item.id" :label="item.campusName" :value="item.id" />
        </el-select> -->
        <!-- <div style="margin: 0 20px">
          <el-button type="primary" @click="clickBtn">搜索</el-button>
        </div> -->
        <div style="margin: 0 10px">
          <el-button type="success" @click="addAdvert">增加题目</el-button>
        </div>
      </div>
      <div style="margin: 20px 0 30px">
        <el-table :data="tableData.arr" border style="width: 100%" :stripe="true">
          <el-table-column prop="id" label="ID" width="100"></el-table-column>
          <el-table-column prop="name" label="题目标题" width="350"></el-table-column>
          <el-table-column label="内容选项" width="350">
            <template v-slot="scope">
              <div>
                A: {{scope.row.answerA}}
              </div>
              <div>
                B: {{scope.row.answerB}}
              </div>
              <div>
                C: {{scope.row.answerC}}
              </div>
              <div>
                D: {{scope.row.answerD}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="categoryName" label="专栏" width="150"></el-table-column>
          <el-table-column prop="rightAnswer" label="答案" width="150"></el-table-column>
          <el-table-column prop="analysis" label="分析" width="150"></el-table-column>
          <!-- <el-table-column prop="senderPhone" label="电话号码" width="150"></el-table-column>
          <el-table-column prop="content" label="内容" width="550"></el-table-column>
          <el-table-column prop="dateTime" label="发布时间" width="250"></el-table-column>
          <el-table-column align="center" label="封面图片" width="180">
            <template v-slot="scope">
              <el-image style="width: 50px; height: 50px" fit="cover" :src="scope.row.imgList"
                :preview-src-list="[scope.row.imgList]"></el-image>
            </template>
          </el-table-column> -->
          <el-table-column label="操作" align="center">
            <template v-slot="scope">
              <el-button size="small" type="danger" @click="closeAdmin(scope.row.id)">删除</el-button>
              <el-button size="small" type="success" @click="changeSubject(scope.row)">修改题目</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-bottom: 10px">
        <div class="demo-pagination-block">
          <el-pagination
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="新增题目" width="30%">
      <el-form :model="form" label-width="60px">
        <el-form-item  label="标题">
          <el-input placeholder="请输入标题" v-model="form.name" type="textarea" />
        </el-form-item>
        <el-form-item label="A">
          <el-input placeholder="请输入A选项内容" v-model="form.answerA" type="input" />
        </el-form-item>
        <el-form-item label="B">
          <el-input placeholder="请输入B选项内容" v-model="form.answerB" type="input" />
        </el-form-item>
        <el-form-item label="C">
          <el-input placeholder="请输入B选项内容" v-model="form.answerC" type="input" />
        </el-form-item>
        <el-form-item label="D">
          <el-input placeholder="请输入D选项内容" v-model="form.answerD" type="input" />
        </el-form-item>
        <el-form-item label="答案">
          <el-select v-model="form.rightAnswer" placeholder="请选择答案">
            <el-option v-for="item in typeList" :key="item.id" :label="item.campusName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="专栏">
          <el-select v-model="form.categoryId" placeholder="请选择专栏">
            <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="解析">
          <el-input placeholder="请输入解析内容" v-model="form.analysis" type="textarea" />
        </el-form-item>
        <!-- <el-form-item label="图片">
          <el-upload v-model:file-list="form.imgImgLists" class="upload-demo"
            action="https://www.haoshiyou.club/file/upload" :on-change="handleChange">
            <el-button type="primary">Click to upload</el-button>
          </el-upload>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="clickBook">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible1" title="新增题目" width="30%">
      <el-form :model="fromUpdate" label-width="60px">
        <el-form-item  label="标题">
          <el-input placeholder="请输入标题" v-model="fromUpdate.name" type="textarea" />
        </el-form-item>
        <el-form-item label="A">
          <el-input placeholder="请输入A选项内容" v-model="fromUpdate.answerA" type="input" />
        </el-form-item>
        <el-form-item label="B">
          <el-input placeholder="请输入B选项内容" v-model="fromUpdate.answerB" type="input" />
        </el-form-item>
        <el-form-item label="C">
          <el-input placeholder="请输入B选项内容" v-model="fromUpdate.answerC" type="input" />
        </el-form-item>
        <el-form-item label="D">
          <el-input placeholder="请输入D选项内容" v-model="fromUpdate.answerD" type="input" />
        </el-form-item>
        <el-form-item label="答案">
          <el-select v-model="fromUpdate.rightAnswer" placeholder="请选择答案">
            <el-option v-for="item in typeList" :key="item.id" :label="item.campusName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="专栏">
          <el-select v-model="fromUpdate.categoryId" placeholder="请选择专栏">
            <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="解析">
          <el-input placeholder="请输入解析内容" v-model="fromUpdate.analysis" type="textarea" />
        </el-form-item>
        <!-- <el-form-item label="图片">
          <el-upload v-model:file-list="form.imgImgLists" class="upload-demo"
            action="https://www.haoshiyou.club/file/upload" :on-change="handleChange">
            <el-button type="primary">Click to upload</el-button>
          </el-upload>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button type="primary" @click="updateSubjectFun">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { toRaw } from '@vue/reactivity'
import { getWallList, removeWall, addPoster } from "../../http/wall/wall"
import { getType } from '../../http/order/order'
import {
  getSubject,
  deleteSubject,
  updateSubject,
  addSubject,
  getCategory,
} from "../../http/school/school";
import { UserFilled } from "@element-plus/icons";
import { ElMessageBox } from "element-plus";

export default defineComponent({
  components: {
    UserFilled,
  },
  setup() {
    let tableData = reactive({
      arr: [],
    });
    let total = ref(1);
    let page = ref(1);
    let userId = ref("");
    let danger = reactive({
      reason: "",
      userId: "",
    });
    const regionId = ref('');
    let typeList: any = ref([]);
    let categoryList: any = ref([])
    const dialogVisible = ref(false);
    const dialogVisible1 = ref(false);
    let form:any = reactive({
      "name": '',
      "answerA": "",
      "answerB": "",
      "answerD": "",
      "answerC": "",
      "rightAnswer": "",
      "analysis": "",
      "categoryId": '',
      "id": '',
      regionId:regionId.value
    })
    const fromUpdate:any = reactive({
        name: '',
        answerA: "",
        answerB: "",
        answerD: "",
        answerC: "",
        rightAnswer: "",
        analysis: "",
        categoryId: '',
        id: ''
    })

    onMounted(async () => {
      // console.log(dfsadf.records)
      getList();
      typeList.value = [
        {campusName: "A", id: "A"},
        {campusName: "B", id: "B"},
        {campusName: "C", id: "C"},
        {campusName: "D", id: "D"},
      ];
    });

    const getList = async () => {
      const data = {
        page: page.value,
        size: 10
      }
      const [subjectList, categoryListReq] = await Promise.all([getSubject(data), getCategory({page: 1, size: 1000})]);
      const subjectData:any =  subjectList.data
      tableData.arr = subjectData.records;
      total.value = subjectData.total;
 
      const categoryData:any = categoryListReq.data
      // console.log(categoryData.records) 
      categoryList.value = categoryData.records
    };

    const handleCurrentChange = (e: number) => {
      page.value = e;
      getList();
    };

    const clickBtn = () => {
      getList();
    };

    const closeAdmin = async (e: any) => {
      ElMessageBox.confirm(
        "你确认删除该题目吗?",
        "提示",
        {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(async () => {
        const params = {
          id: e
        }
        await deleteSubject(params)
        getList()
      });
    };

    const addAdvert = async () => {
      dialogVisible.value = true;
    }

    const handleChange = async (e:any) => {
      await form.imgImgLists.push(toRaw(e.response).msg);
    }

    const changeSubject = (row:any) => {
      dialogVisible1.value = true;
      fromUpdate.name = row.name
      fromUpdate.answerA = row.answerA
      fromUpdate.answerB = row.answerB
      fromUpdate.answerD = row.answerD
      fromUpdate.answerC = row.answerC
      fromUpdate.rightAnswer = row.rightAnswer
      fromUpdate.analysis = row.analysis
      fromUpdate.categoryId = row.categoryId
      fromUpdate.id = row.id
    }

    const clickBook = async () => {
      await addSubject(form)
      dialogVisible.value = false;
      getList();
    }

    const updateSubjectFun = async () => {
      await updateSubject(fromUpdate)
      dialogVisible1.value = false;
      getList();
    }

    return {
      tableData,
      total,
      userId,
      dialogVisible,
      dialogVisible1,
      danger,
      typeList,
      categoryList,
      regionId,
      form,
      fromUpdate,
      changeSubject,
      clickBtn,
      handleChange,
      //   openAdmin,
      handleCurrentChange,
      closeAdmin,
      addAdvert,
      clickBook,
      updateSubjectFun
      //   refuseUser,
    };
  },
});
</script>

<style scoped>

</style>
